<template>
	<view class="box-detail">
		<view class="item-index-top">
			<view class="item-top-text">项目供地</view>
		</view>
		<view class="box-detail-content">
			<view class="box-detail-content-item">
				<view class="row-title">保证金材料</view>
				<view class="box-attach-row" >
					<image src="../../../../static/images/icon_enclosure.png" mode="widthFix" class="box-attach-icon">
					</image>
					<text class="box-attach-name" @click="uploadFiles('BZJ')">点击上传</text>
				</view>
			</view>
			<view class="box-detail-content-item" v-for="item,index in  getFileList.BZJ_file" :key="index">
				<view class="row-title"></view>
				<view class="row-content box-attach-row">
					<image src="../../../../static/images/icon_enclosure.png" mode="" class="box-attach-icon"></image>
					<text class="box-attach-name">{{ item.fileShowName||"无"}}</text>
				</view>
			</view>
			<view class="box-detail-content-item">
				<view class="row-title">通过审批日期</view>
				<uni-datetime-picker class="form-picker" type="date" :value="formData.BZJ_DATE" start="2000-2-31" end="2050-12-30" @change="dateChange1"></uni-datetime-picker>
				<!-- <view class="row-content">{{pageData.model.BZJ_DATE||"无"}}</view> -->
			</view>
			<view class="box-detail-content-item">
				<view class="row-title">备注</view>
				<textarea class="uni-input form-input" v-model="formData.BZJ_REMARK" name="input" placeholder="请输入备注"/>
				<!-- <view class="row-content">{{pageData.model.BZJ_REMARK||"无"}}</view> -->
			</view>
		</view>
		<view class="box-detail-content">
			<view class="box-detail-content-item">
				<view class="row-title">用地红线材料</view>
				<view class="box-attach-row" >
					<image src="../../../../static/images/icon_enclosure.png" mode="widthFix" class="box-attach-icon">
					</image>
					<text class="box-attach-name" @click="uploadFiles('YDHX')">点击上传</text>
				</view>
			</view>
			<view class="box-detail-content-item" v-for="item,index in  getFileList.YDHX_file" :key="index">
				<view class="row-title"></view>
				<view class="row-content box-attach-row">
					<image src="../../../../static/images/icon_enclosure.png" mode="" class="box-attach-icon"></image>
					<text class="box-attach-name">{{ item.fileShowName||"无"}}</text>
				</view>
			</view>
			<view class="box-detail-content-item">
				<view class="row-title">通过审批日期</view>
				<uni-datetime-picker class="form-picker" type="date" :value="formData.YDHX_DATE" start="2000-2-31" end="2050-12-30" @change="dateChange2"></uni-datetime-picker>
				<!-- <view class="row-content">{{pageData.model.YDHX_DATE||"无"}}</view> -->
			</view>
			<view class="box-detail-content-item">
				<view class="row-title">备注</view>
				<textarea class="uni-input form-input" v-model="formData.YDHX_REMARK" name="input" placeholder="请输入备注"/>
				<!-- <view class="row-content">{{pageData.model.YDHX_REMARK||"无"}}</view> -->
			</view>
		</view>
		<view class="box-detail-content">
			<view class="box-detail-content-item">
				<view class="row-title">水电包装材料</view>
				<view class="box-attach-row" >
					<image src="../../../../static/images/icon_enclosure.png" mode="widthFix" class="box-attach-icon">
					</image>
					<text class="box-attach-name" @click="uploadFiles('SDBZ')">点击上传</text>
				</view>
			</view>
			<view class="box-detail-content-item" v-for="item,index in  getFileList.SDBZ_file" :key="index">
				<view class="row-title"></view>
				<view class="row-content box-attach-row">
					<image src="../../../../static/images/icon_enclosure.png" mode="" class="box-attach-icon"></image>
					<text class="box-attach-name">{{ item.fileShowName||"无"}}</text>
				</view>
			</view>
			<view class="box-detail-content-item">
				<view class="row-title">通过审批日期</view>
				<uni-datetime-picker class="form-picker" type="date" :value="formData.SDBZ_DATE" start="2000-2-31" end="2050-12-30" @change="dateChange3"></uni-datetime-picker>
				<!-- <view class="row-content">{{pageData.model.SDBZ_DATE||"无"}}</view> -->
			</view>
			<view class="box-detail-content-item">
				<view class="row-title">备注</view>
				<textarea class="uni-input form-input" v-model="formData.SDBZ_REMARK" name="input" placeholder="请输入备注"/>
				<!-- <view class="row-content">{{pageData.model.SDBZ_REMARK||"无"}}</view> -->
			</view>
		</view>
		<view class="box-detail-content">
			<view class="box-detail-content-item">
				<view class="row-title">土地款交付材料</view>
				<view class="box-attach-row" >
					<image src="../../../../static/images/icon_enclosure.png" mode="widthFix" class="box-attach-icon">
					</image>
					<text class="box-attach-name" @click="uploadFiles('TDKJF')">点击上传</text>
				</view>
			</view>
			<view class="box-detail-content-item" v-for="item,index in  getFileList.TDKJF_file" :key="index">
				<view class="row-title"></view>
				<view class="row-content box-attach-row">
					<image src="../../../../static/images/icon_enclosure.png" mode="" class="box-attach-icon"></image>
					<text class="box-attach-name">{{ item.fileShowName||"无"}}</text>
				</view>
			</view>
			<view class="box-detail-content-item">
				<view class="row-title">通过审批日期</view>
				<uni-datetime-picker class="form-picker" type="date" :value="formData.TDKJF_DATE" start="2000-2-31" end="2050-12-30" @change="dateChange4"></uni-datetime-picker>
				<!-- <view class="row-content">{{pageData.model.TDKJF_DATE||"无"}}</view> -->
			</view>
			<view class="box-detail-content-item">
				<view class="row-title">备注</view>
				<textarea class="uni-input form-input" v-model="formData.TDKJF_REMARK" name="input" placeholder="请输入备注"/>
				<!-- <view class="row-content">{{pageData.model.TDKJF_REMARK||"无"}}</view> -->
			</view>
		</view>
		<view class="box-detail-content border-wid">
			<view class="box-detail-content-item">
				<view class="row-title">其他</view>
				<view class="box-attach-row" >
					<image src="../../../../static/images/icon_enclosure.png" mode="widthFix" class="box-attach-icon">
					</image>
					<text class="box-attach-name" @click="uploadFiles('OTHER')">点击上传</text>
				</view>
			</view>
			<view class="box-detail-content-item" v-for="item,index in  getFileList.OTHER_file" :key="index">
				<view class="row-title"></view>
				<view class="row-content box-attach-row">
					<image src="../../../../static/images/icon_enclosure.png" mode="" class="box-attach-icon"></image>
					<text class="box-attach-name">{{ item.fileShowName||"无"}}</text>
				</view>
			</view>
			<view class="box-detail-content-item">
				<view class="row-title">通过审批日期</view>
				<uni-datetime-picker class="form-picker" type="date" :value="formData.OTHER_DATE" start="2000-2-31" end="2050-12-30" @change="dateChange5"></uni-datetime-picker>
				<!-- <view class="row-content">{{pageData.model.OTHER_DATE||"无"}}</view> -->
			</view>
			<view class="box-detail-content-item">
				<view class="row-title">备注</view>
				<textarea class="uni-input form-input" v-model="formData.OTHER_REMARK" name="input" placeholder="请输入备注"/>
				<!-- <view class="row-content">{{pageData.model.OTHER_REMARK||"无"}}</view> -->
			</view>
		</view>
		<new-file ref="child" :pageData="pageData" :fileType='fileType'/>
	</view>
</template>

<script>
	import newFile from './new_file.vue'
	export default {
		components: {
			newFile
		},
		data(){
			return{
				getListData:{},
				getFileList:{},
				formData:{},
				code:'',
				date: new Date(),
				fileListData:{},
				fileType:''
			}
		},
		props: {
			pageData: {
				type: Object,
				default(){
					return {}
				}
			}
		},
		watch:{
			pageData(){
				if(this.pageData.model){
					this.formData={
						PROJ_ID: this.pageData.model.PROJ_ID,
						BZJ_DATE: this.pageData.model.BZJ_DATE,//保证金材料
						BZJ_REMARK:this.pageData.model.BZJ_REMARK,//备注
						YDHX_DATE:this.pageData.model.YDHX_DATE, //用地红线材料
						YDHX_REMARK:this.pageData.model.YDHX_REMARK,//备注
						SDBZ_DATE:  this.pageData.model.SDBZ_DATE,//水电包装材料
						SDBZ_REMARK:this.pageData.model.SDBZ_REMARK,//备注
						TDKJF_DATE: this.pageData.model.TDKJF_DATE,  //土地款交付材料
						TDKJF_REMARK: this.pageData.model.TDKJF_REMARK, //备注
						OTHER_DATE:this.pageData.model.OTHER_DATE, 	//通过审批日期
						OTHER_REMARK:this.pageData.model.OTHER_REMARK,    //备注
					}
				}else{
					this.formData={}
				}
				console.log(this.formData,"this.formData")
				if(this.pageData.docJsonData){
					this.getListData=this.pageData.docJsonData
					console.log(this.pageData,"this.pageData.model")
					if(this.getListData['PPP_T_BUS_SITE_SUPPLY.BZJCL']&&this.getListData['PPP_T_BUS_SITE_SUPPLY.BZJCL'].fileList.length){
						this.getFileList.BZJ_file= this.getListData['PPP_T_BUS_SITE_SUPPLY.BZJCL'].fileList//保证金材料文件
					}else{
						this.getFileList.BZJ_file=[]
					}
					if(this.getListData['PPP_T_BUS_SITE_SUPPLY.YDHXCL']&&this.getListData['PPP_T_BUS_SITE_SUPPLY.YDHXCL'].fileList.length){
						this.getFileList.YDHX_file= this.getListData['PPP_T_BUS_SITE_SUPPLY.YDHXCL'].fileList//用地红线材料文件
					}else{
						this.getFileList.YDHX_file=[]
					}
					if(this.getListData['PPP_T_BUS_SITE_SUPPLY.SDBZCL']&&this.getListData['PPP_T_BUS_SITE_SUPPLY.SDBZCL'].fileList.length){
						this.getFileList.SDBZ_file= this.getListData['PPP_T_BUS_SITE_SUPPLY.SDBZCL'].fileList//水电包装材料文件 
					}else{
						this.getFileList.SDBZ_file=[]
					}
					if(this.getListData['PPP_T_BUS_SITE_SUPPLY.TDKJFCL']&&this.getListData['PPP_T_BUS_SITE_SUPPLY.TDKJFCL'].fileList.length){
						this.getFileList.TDKJF_file= this.getListData['PPP_T_BUS_SITE_SUPPLY.TDKJFCL'].fileList//土地款交付材料文件
					}else{
						this.getFileList.TDKJF_file=[]
					}
					if(this.getListData['PPP_T_BUS_SITE_SUPPLY.OTHER']&&this.getListData['PPP_T_BUS_SITE_SUPPLY.OTHER'].fileList.length){
						this.getFileList.OTHER_file=this.getListData['PPP_T_BUS_SITE_SUPPLY.OTHER'].fileList //其他文件
					}else{
						this.getFileList.OTHER_file=[]
					}
				}else{
					this.getFileList={}
				}
				
			}
		},
		methods:{
			uploadFiles(name){
				this.fileType=name
				this.$refs.child.popOpen()
			},
			dateChange1(e) {
				this.date = e
				this.formData.BZJ_DATE=e 
			},
			dateChange2(e) {
				this.date = e
				this.formData.YDHX_DATE=e 
			},
			dateChange3(e) {
				this.date = e
				this.formData.SDBZ_DATE=e 
			},
			dateChange4(e) {
				this.date = e
				this.formData.TDKJF_DATE=e 
			},
			dateChange5(e) {
				this.date = e
				this.formData.OTHER_DATE=e 
			},
		},
	}
</script>

<style lang="scss" scoped>
	.wrap{
		padding-bottom: 60rpx;
	}
	page{
		padding-bottom: 20rpx;
	}
	.form-picker {
		width: 250rpx;
	}
	.box-detail {
		min-height: 760rpx;
		background-color: #ffffff;
		border-radius: 20rpx;
		margin: 20rpx;
		padding: 26rpx 30rpx 50rpx 30rpx;
	}
	.item-index-top{
		// width: 650rpx;
		height: 40rpx;
		// margin: 20rpx 20rpx 18rpx 20rpx;
		background-color: #0099cc;
		border-radius: 10rpx;
		.item-top-text{
			font-family: AlibabaPuHuiTi-Regular;
			padding-left: 20rpx;
			font-size: 26rpx;
			font-weight: normal;
			line-height: 40rpx;
			letter-spacing: 0px;
			color: #ffffff;
		}
	}
	.item-top{
		display: flex;
		justify-content: space-between;
		.setion-left{
			display: flex;
			flex-direction: column;
			.left-text-top{
				font-size: 30rpx;
				font-weight: 600;
				color: #414a5d;
			}
			.left-text-bot{
				margin-top: 22rpx;
				font-size: 26rpx;
				color: #7f7f7f;
			}
		}
		.setion-right{
			display: flex;
			flex-direction: column;
			align-items: flex-end;
			.right-text-top{
				height: 30rpx;
				line-height: 30rpx;
				font-size: 26rpx;
				font-weight: normal;
				color: #9a9a9a;
			}
			.right-text-bot{
				margin-top: 22rpx;
				font-size: 28rpx;
				font-weight: normal;
				color: #999999;
			}
		}
	}
	.box-detail-header {
		display: flex;
		justify-content: space-between;
		margin-bottom: 8rpx;
	
		.name {
			font-size: 30rpx;
			color: #414a5d;
			font-weight: bold;
		}
	
		.date {
			font-size: 26rpx;
			color: #9a9a9a;
		}
	}
	
	.box-net {
		font-size: 26rpx;
		color: #0099cc;
	}
	
	.box-detail-content {
		margin-top: 24rpx;
		padding: 0 10rpx;
		border-bottom: 8rpx solid #e8f0f2;
		
	}
	// .border {
	// 	;
	// }
	.border-wid{
		border-bottom: 0
	}
	.box-detail-content-item {
		display: flex;
		flex-direction: row;
		// justify-content: flex-start;
		// justify-content: space-between;
		margin-bottom: 10rpx;
	
		.row-title {
			width: 140rpx;
			font-size: 26rpx;
			color: #9a9a9a;
			text-align: left;
			flex-shrink: 0;
			margin-right: 10rpx;
	
			&.mag {
				margin-left: 18rpx;
			}
		}
	
		.row-content {
			font-size: 26rpx;
			color: #414a5d;
			word-wrap: break-word;
			word-break: break-all;
			flex: 1;
			text-align: left;
	
			&.mag {
				margin-right: 18rpx;
			}
		}
	}
	
	.bar-contact {
		background-color: #0099cc;
		border-radius: 10px;
		height: 40rpx;
		line-height: 40rpx;
		padding-left: 18rpx;
		color: #FFFFFF;
		font-size: 24rpx;
		
	}
	.box-attach{
		margin-top: 20rpx;
		padding-top: 20rpx;
		// padding: 0 10rpx;
		border-top: 1px solid #e8f0f2;
	}
	.box-attach-row {
		display: flex;
		flex: 1;
		align-items: center;
		// padding: 0 18rpx;
		// height: 38rpx;
		margin-bottom: 10rpx;
		.box-attach-icon {
			width: 34rpx;
			height: 40rpx;
			margin-right: 30rpx;
		}
		.box-attach-name {
			flex: 1;
			font-size: 26rpx;
			color: #0099cc;
		}
	}
	.fixed-action-bar{
		width: 100%;
		display: flex;
		height: 70rpx;
		align-items: center;
		background: #fff;
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 999;
		.item{
			width: 50%;
			display: flex;
			justify-content: center;
			align-items: center;
			
		}
		.icon{
			width: 30rpx;
		}
		.btn-box{
			width: 90rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			height: 70rpx;
		}
		.text-edit{
			font-size: 24rpx;
			color: #0099cc;
			line-height: 70rpx;
		}
		.text-delete{
			font-size: 24rpx;
			color: #cc3357;
			line-height: 70rpx;
		}
	}
	.box-attach-row {
		display: flex;
		align-items: center;
		// padding: 0 18rpx;
		height: 38rpx;
		margin-bottom: 10rpx;
		.box-attach-icon {
			width: 34rpx;
			margin-right: 30rpx;
		}
		.box-attach-name {
			font-size: 26rpx;
			color: #0099cc;
		}
	}
	.uni-input{
		font-size: 26rpx;
		color: #808080;
		// border-bottom:1px solid #dce4e6;
		flex:1;
	}
</style>
